<template>
    <div>
        <div>
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item>1</van-swipe-item>
                <van-swipe-item>2</van-swipe-item>
                <van-swipe-item>3</van-swipe-item>
                <van-swipe-item>4</van-swipe-item>
            </van-swipe>
        </div>
        <div>
            <h3 v-show="flag">我是state</h3>
            <h3 v-show="showNum">我是getter</h3>
            <button @click="handleClick">test</button>
        </div>
    </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";

export default {
    name: 'Home',
    components: {},
    computed: {
        ...mapState(["flag"]),
        ...mapGetters(["showNum"])
    },
    created() {
        // console.log(this.$store.state);
        // this.$store.dispatch('setList',{name:"1231233",age:123} )
        this.setList({ name: "123313131", age: 2222 });
    },
    mounted() {
        this.setUsername(666)
    },
    methods: {
        ...mapMutations(["setFlage","setUsername"]),
        ...mapActions(["setList"]),
        handleClick() {
        // this.$store.state.flage = true;
        this.$store.commit("setFlage", !this.$store.state.flag);
    },
  },
}
</script>

<style>
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
</style>